<template>
	<view class="content">
		<up-navbar title="我的推广"
			bgColor="rgba(0,0,0,0)"
			titleStyle="color: #fff"
			leftIconColor="#fff"
			:autoBack="true"
			:fixed="false"></up-navbar>

		<view class="title">常用工具</view>

		<view class="tool">
			<view v-for="(item, index) in tool" @click="$path.navigateTo(item.path)">
				<image :src="`/static/tg${index + 1}.png`" mode=""></image>
				<view class="tit">
					<text>{{item.tit}}</text>
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>



</template>

<script setup>
	import { reactive } from 'vue';
	const tool = reactive([{
		tit: '我的邀请',
		text: '邀请好友列表',
		path: './team'
	}, {
		tit: '推广二维码',
		text: '我的专属二维码',
		path: './invite'
	}])
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		height: 780rpx;
		background-image: linear-gradient(179deg, #FF7316 0%, #ffffff 100%);
		position: relative;

		.title {
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			margin-top: 60rpx;
			padding: 0 32rpx;
		}

		.tool {
			width: 686rpx;
			margin: 32rpx auto;
			padding: 0 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			>view {
				width: 300rpx;
				display: flex;
				align-items: center;
				height: 142rpx;

				image {
					width: 84rpx;
					height: 84rpx;
					margin-right: 20rpx;
				}

				.tit {
					display: flex;
					flex-direction: column;
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;

					>text:nth-child(2) {
						font-weight: 500;
						font-size: 24rpx;
						color: #ffffff;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>